<template>
  <a-layout class="page-miH page-bgBack">
    <PageHeader @back="goBack" subTitle="返回">{{ title }}</PageHeader>
    <div class="head">
      <div style="font-size: 18px">{{ personalPeriod }}</div>
      <div>
        <a-button
          v-if="isAll === false && buttonArchive.isArchive === 'false'"
          :disabled="approStatus === 'true'"
          type="primary"
          style="margin-right: 10px"
          @click="goImport"
          >01 工资数据导入</a-button
        >
        <a-icon v-if="isAll === false && isArchive !== 'true'" type="double-right" style="margin-right: 10px; color: #9c9c9c" />
        <a-button
          v-if="isAll === false && buttonArchive.isArchive === 'false'"
          :disabled="approStatus === 'true'"
          style="margin-right: 10px"
          @click="showSynchronous"
          type="primary"
          >02 同步社保</a-button
        >
        <a-icon v-if="isAll === false && isArchive !== 'true'" style="margin-right: 10px; color: #9c9c9c" type="double-right" />
        <a-button
          v-if="isAll === false && buttonArchive.isArchive === 'false'"
          :disabled="approStatus === 'true'"
          style="margin-right: 10px"
          @click="taxCalculation"
          type="primary"
          >03 计算个税</a-button
        >
        <a-icon v-if="isAll === false && isArchive !== 'true'" type="double-right" style="margin-right: 10px; color: #9c9c9c" />
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1" v-if="isArchive === 'true'"> 生成银行报盘 </a-menu-item>
            <a-menu-item key="2" v-if="isArchive === 'true'"> 生成电子工资条 </a-menu-item>
            <a-menu-item v-if="isAll === false && buttonArchive.isArchive === 'false'" :disabled="approStatus === 'true'" key="5"
              >新增计薪人员</a-menu-item
            >
            <a-menu-item v-if="isAll === false && buttonArchive.isArchive === 'false'" :disabled="approStatus === 'true'" key="10"
              >考勤数据导入</a-menu-item
            >
            <a-menu-item v-if="isAll === false && buttonArchive.isArchive === 'false'" :disabled="approStatus === 'true'" key="6"
              >归档</a-menu-item
            >
            <a-menu-item
              v-if="isAll"
              :disabled="detailList.customerFees === 0 || detailList.customerFees === null || approStatus === 'true'"
              key="7"
              >生成薪资账单</a-menu-item
            >
          </a-menu>
          <a-button> 更多功能 <a-icon type="caret-down" /> </a-button>
        </a-dropdown>
      </div>
    </div>
    <a-modal
      v-model="generatelVisible"
      title="生成电子工资条"
      ok-text="点击生成"
      cancel-text="取消"
      @ok="generateWage"
      :ok-button-props="{ props: { disabled: !tableName } }"
    >
      <div style="padding: 0 30px">
        <label>工资条名称：</label>
        <a-input style="width: 160px; margin-left: 10px" placeholder="请输入" v-model="tableName"></a-input>
      </div>
    </a-modal>
    <a-modal
      v-model="statisticalVisible"
      title="生成银行报盘"
      ok-text="点击生成"
      cancel-text="取消"
      @ok="statisticalOk"
      :ok-button-props="{ props: { disabled: !bankType } }"
    >
      <div style="padding: 0 30px">
        <label>银行类型：</label>
        <a-select style="width: 160px; margin-left: 10px" placeholder="请选择" @change="bankChange" v-model="bankType">
          <a-select-option value="HUAXIA_BANK">华夏银行</a-select-option>
          <a-select-option value="QINGDAO_BANK">青岛银行</a-select-option>
          <a-select-option value="MINSHENG_BANK">民生银行</a-select-option>
          <a-select-option value="ZHONGXIN_BANK">中信银行</a-select-option>
        </a-select>
      </div>
    </a-modal>

    <EmployeeSelect
      :show.sync="chooseMemberVisible"
      :monthly="monthly"
      :yearly="yearly"
      :status="status"
      :default-selected-keys="defaultSelectedKeys"
      :selected-list.sync="selectedList"
      @change="memberSelectedChange"
    />
    <a-modal
      :ok-button-props="{ props: { disabled: !selectRowKey.length } }"
      v-model="empVisible"
      title="确认计薪人员"
      width="600px"
      @ok="replace"
      okText="更换"
      cancelText="取消"
    >
      <div class="emp-title">
        <span>检测到以下员工本月已创建月工资表，是否选择更换工资表？</span>
      </div>
      <a-table
        style="margin-top: 15px"
        :columns="empColumns"
        :data-source="createdList"
        row-key="key"
        :scroll="{ y: 300 }"
        :pagination="false"
        :row-selection="{
          selectedRowKeys: selectRowKey,
          onChange: onSelectChange2
        }"
      ></a-table>
      <a-layout />
    </a-modal>
    <a-modal v-model="abolitionVisible" @ok="handleAbolition" :width="450">
      <div style="display: flex; align-items: center; justify-content: left">
        <div style="margin-left: 15px; font-size: 35px" class="primary_color">
          <a-icon type="question-circle" />
        </div>
        <div style="margin-left: 15px; position: relative; top: 3px; font-size: 16px; font-weight: 500; color: #000000ff">
          <span>
            是否确认归档？归档后本工资表所有数据
            <span style="color: #ec5252ff">不允许删除或更改</span>
          </span>
        </div>
      </div>
    </a-modal>
    <div class="fix-item-wrapper flex-center">
      <div class="fix-item-one">
        <div class="fix-item-oneBox">
          <img :src="combined" alt="" style="width: 32px; height: 32px" />
          <div class="fix-item-name" style="margin-left: 16px">合计</div>
        </div>
      </div>
      <div class="fix-item-two overflow-y-auto flex-center">
        <div class="item-two-Box">
          <div class="item-two-border">
            <div class="childpProjectName">本月计薪人员</div>
            <div class="childContentName">{{ detailList.empNumber ? detailList.empNumber : 0 }}人</div>
          </div>
        </div>
        <div v-for="item in detailList.covarianceItemAmountVOList" :key="item.name" class="item-two-Box">
          <div class="item-two-border">
            <div class="childpProjectName">{{ item.name }}</div>
            <div class="childContentName">¥{{ item.amount || item.amount === 0 ? item.amount : "--" }}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="padding: 0 20px 20px 20px" v-if="isAll === false && isArchive !== 'true'">
      <a-alert closable message="我们建议您按此流程进行工资计算：工资数据导入 ——> 同步社保 ——> 计算个税" type="info" show-icon />
    </div>
    <div
      style="padding: 0 20px 20px 20px"
      v-if="(isAll === false && approStatus === 'true') || (isAll === false && buttonArchive.isArchive === 'true')"
    >
      <a-alert message="工资表已归档 不可进行操作" type="warning" show-icon />
    </div>
    <div class="operation">
      <div>
        <a-input-search allow-clear class="mr12" placeholder="姓名/手机号/身份证号" style="width: 180px" @search="inputChange" />
        <a-popover trigger="click" placement="bottom" style="cursor: pointer">
          <div slot="content" style="width: 485px; height: 100px">
            <a-select
              mode="multiple"
              style="min-width: 145px; width: 145px; margin-left: 12px; margin-top: 24px"
              placeholder="请选择标签"
              allow-clear
              @change="selectChange"
              v-model="tags"
            >
              <a-select-option v-for="item in labelList" :key="item.tagName"> {{ item.tagName }}</a-select-option>
            </a-select>
            <a-select
              @change="selectChange"
              v-model="channelId"
              style="min-width: 145px; width: 145px; margin-left: 12px; margin-top: 24px"
              placeholder="请选择渠道"
              :allow-clear="true"
            >
              <a-select-option v-for="(item, index) in channelNames" :key="index" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
            <a-select
              v-model="postType"
              :options="$store.state.enums.postTypeLst"
              allowClear
              placeholder="请选择工作性质"
              style="min-width: 145px; width: 145px; margin-left: 12px; margin-top: 24px"
              @change="selectChange"
            />
          </div>
          <a-icon type="filter" />
        </a-popover>
      </div>
      <div>
        <a-button type="link" size="small" style="color: #767885; font-size: 12px" @click="reload">刷新<a-icon type="reload" /></a-button>
        <a-divider type="vertical" />

        <a-popover v-model="headVisible" title trigger="click" placement="bottom" @visibleChange="handleHeadChange">
          <div slot="content" style="width: 600px; height: 320px">
            <div>
              <div>已选择表头</div>
              <div class="overview-tag-wrapper">
                <draggable v-model="tempSelectedHead" filter=".forbid" animation="3000" @start="onStart" @end="onEnd" :move="onMove">
                  <transition-group>
                    <a-tag
                      v-for="(item, index) in tempSelectedHead"
                      :key="index"
                      :closable="item.title !== '姓名' && item.title !== '身份证号'"
                      :color="item.title !== '姓名' && item.title !== '身份证号' ? '#fff' : '#E8E8E8'"
                      :class="
                        item.title !== '姓名' && item.title !== '身份证号' ? 'overview-select-tag' : 'overview-select-tag-name forbid'
                      "
                      @close="deleteSelectedHead($event, index)"
                      >{{ item.title }}</a-tag
                    >
                  </transition-group>
                </draggable>
              </div>
            </div>
            <div>
              <div>可选择表头</div>
              <div>
                <a-tag
                  v-for="(item, index) in tempNoSelectedHead"
                  :key="index"
                  class="overview-no-select-tag"
                  @click="addSelectedHead(index)"
                  >{{ item.title }}</a-tag
                >
              </div>
            </div>
            <a-row type="flex" justify="end" style="position: absolute; bottom: 20px; right: 20px">
              <a-button style="margin-right: 12px" @click="handleHeadCancel">取消</a-button>
              <a-button type="primary" @click="handleHeadSearch">查询</a-button>
            </a-row>
          </div>
          <a-button type="link" size="small" style="color: #767885; font-size: 12px">选择表头<a-icon type="menu" /></a-button>
        </a-popover>
        <a-divider type="vertical" />
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="8" :disabled="!dataList.length">全部导出</a-menu-item>
          </a-menu>
          <a-button type="link" size="small" style="color: #767885; font-size: 12px">导出<a-icon type="caret-down" /></a-button>
        </a-dropdown>
      </div>
    </div>
    <a-modal v-model="synchronousVisible" title="同步社保" @ok="synchronousOk">
      <div style="display: flex; align-items: center; justify-content: flex-start; margin-left: 36px">
        <div><span style="color: #ff0000">*</span>选择月份：</div>
        <a-month-picker placeholder="请选择月份" v-model="synchronousMonth" />
      </div>
    </a-modal>
    <div class="tableBox">
      <a-table
        row-key="id"
        :loading="loading"
        :columns="columns"
        :data-source="dataList"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 1200 }"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
      >
      </a-table>
    </div>
    <div
      v-show="!buttonState"
      style="
        width: 100%;
        display: flex;
        justify-content: center;
        position: fixed;
        bottom: 0;
        height: 60px;
        align-items: center;
        background: #ffffff;
        box-shadow: -1px 0px 4px 0px rgba(0, 0, 0, 0.13);
        z-index: 1;
      "
    >
      <a-button
        v-if="isAll === false && buttonArchive.isArchive === 'false'"
        style="margin-right: 10px"
        @click="deleteEmployes"
        v-show="!buttonState"
        :disabled="approStatus === 'true'"
        >删除计薪人员</a-button
      >
      <a-button
        type="primary"
        @click="goEdit"
        v-if="isAll === false && buttonArchive.isArchive === 'false'"
        :disabled="approStatus === 'true'"
        style="margin-right: 10%"
        v-show="!buttonState"
        >在线编辑</a-button
      >
    </div>
    <checkModal :visible.sync="visibleKQ" :salaryTemplateSalaryIds.sync="salaryTemplateId" @upDate="upDate" />
  </a-layout>
</template>
<script>
const empColumns = [
  {
    title: "姓名",
    dataIndex: "empName",
    key: "empName"
  },
  {
    title: "薪资组",
    dataIndex: "salaryGroupName",
    key: "salaryGroupName"
  },
  {
    title: "月工资表名称",
    dataIndex: "salaryTemplateName",
    key: "salaryTemplateName"
  }
];
const columns = [
  {
    title: "姓名",
    dataIndex: "empName",
    key: "empName",
    width: 120,
    fixed: "left"
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    key: "idCard",
    width: 230,
    fixed: "left"
  },
  {
    title: "应发工资",
    dataIndex: "shouldWages",
    key: "shouldWages",
    width: 120
  },
  {
    title: "个人社保",
    dataIndex: "empSocialSecurity",
    key: "empSocialSecurity",
    width: 120
  },
  {
    title: "企业社保",
    dataIndex: "enterpriseSocialSecurity",
    key: "enterpriseSocialSecurity",
    width: 120
  },
  {
    title: "个人公积金",
    dataIndex: "empProvidentFund",
    key: "empProvidentFund",
    width: 140
  },
  {
    title: "企业公积金",
    dataIndex: "enterpriseProvidentFund",
    key: "enterpriseProvidentFund",
    width: 140
  },
  {
    title: "个人所得税",
    dataIndex: "tax",
    key: "tax",
    width: 140
  },
  {
    title: "实发工资",
    dataIndex: "paidWages",
    key: "paidWages",
    width: 120
  }
];
const initColumns = [
  {
    title: "姓名",
    dataIndex: "empName",
    key: "empName",
    width: 120,
    fixed: "left"
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    key: "idCard",
    width: 230,
    fixed: "left"
  },
  {
    title: "应发工资",
    dataIndex: "shouldWages",
    key: "shouldWages",
    width: 120
  },
  {
    title: "个人社保",
    dataIndex: "empSocialSecurity",
    key: "empSocialSecurity",
    width: 120
  },
  {
    title: "企业社保",
    dataIndex: "enterpriseSocialSecurity",
    key: "enterpriseSocialSecurity",
    width: 120
  },
  {
    title: "个人公积金",
    dataIndex: "empProvidentFund",
    key: "empProvidentFund",
    width: 140
  },
  {
    title: "企业公积金",
    dataIndex: "enterpriseProvidentFund",
    key: "enterpriseProvidentFund",
    width: 140
  },
  {
    title: "个人所得税",
    dataIndex: "tax",
    key: "tax",
    width: 140
  },
  {
    title: "实发工资",
    dataIndex: "paidWages",
    key: "paidWages",
    width: 120
  }
];
import {
  account,
  getHeaders,
  getSelectHeadersNewReq,
  selectSalaryGroup,
  empSelectPageNewReq,
  gitTemplateDetailNewReq,
  gitTemplateHeader,
  deleteEmployeNewReq,
  addEmpDetailNewReq,
  archiveNewReq,
  getEmpCreatedNewReq,
  getnotDetailsList,
  synchronous,
  generateWageList,
  getEmpListAll,
  generatedBills,
  listByCompanyIdGet,
  getChannels,
  syncSocAndPfNewReq,
  taxCalculationNewReq,
  updateHead
} from "@/api/wages/monthly";

import axios from "axios";
import qs from "qs";
import draggable from "vuedraggable";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
import moment from "moment";
export default {
  mixins: [mixin],
  components: {
    draggable,
    EmployeeSelect: () => import("@/components/EmployeeSelect2/employeeSelect-xinzi"),
    checkModal: () => import("./components/checkModal")
  },

  data() {
    return {
      headVisible: false,
      tempSelectedHead: [],
      tempNoSelectedHead: [],
      status: 1,
      postType: undefined,
      approStatus: false,
      abolitionVisible: false,
      pageSizeOptions: ["10", "20", "50", "100"],
      tableName: undefined,
      generatelVisible: false,
      title: "",
      empVisible: false,
      tags: [],
      empList: [],
      empIdsList: [],
      empIdList: [],
      createdList: [],
      empColumns,
      salaryTemplateSalaryIdList: [],
      buttonArchive: {},
      isArchive: true,
      buttonState: true,
      loading: true,
      combined: require("@/assets/img/wages/monthly/combined.png"),
      inputName: null,
      companyName: this.$store.state.hr.companyName,
      isAll: false,
      selectedList: [],
      defaultSelectedKeys: [],
      chooseMemberVisible: false,
      selectedRowId: [],
      selectedRowKeys: [],
      selectedRow: [],
      selectRowKey: [],
      regType: undefined,
      channelId: undefined,
      channelNames: [],
      dataList: [],
      labelList: [],
      initColumns,
      tableId: null,
      columns,
      detailList: [],
      allGroupId: [],
      groupList: [],
      empAllList: [],
      templateId: null,

      empStatus: null,
      salaryTemplateId: null,
      companyId: this.$store.state.hr.companyId,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      salaryGroupSalaryId: null,
      monthly: null,
      yearly: null,
      bankType: undefined,
      synchronousMonth: undefined,
      statisticalVisible: false,
      selectString: {},
      ignore: [],
      canSee: [],
      synchronousVisible: false,
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      visibleKQ: false
    };
  },

  created() {
    this.approStatus = this.$route.query.approStatus;
    this.isArchive = this.$route.query.isArchive ? this.$route.query.isArchive : true;
    this.$set(this.buttonArchive, "isArchive", this.$route.query.isArchive);
    this.salaryHeaderId = this.$route.query.salaryHeaderId;
    this.salaryTemplateId = this.$route.query.salaryTemplateId;
    this.title = this.$route.query.title;
    this.templateId = this.$route.query.templateId;
    this.yearly = this.$route.query.yearly;
    this.monthly = this.$route.query.monthly;
    this.tableName = this.$route.query.tableName;
    this.getSelectSalaryGroup();
    this.gitTemplateDetailList();
    // this.gitTemplateHeaderList();
    this.getEmpListAll();
    this.getListByCompanyId();
    this.getChannelsList();
    this.personalPeriod = this.$route.query.personalPeriod;
    this.isAll = this.$route.query.isAll ? this.$route.query.isAll : false;
    // if (this.isAll === "true") {
    //   this.rowSelection = undefined;
    // } else if (this.isAll === false) {
    //   this.rowSelection = {
    //     selectedRowKeys: this.selectedRowKeys,
    //     onChange: this.onSelectChange
    //   };
    // }
    this.getSelectHeaders();
    // if (this.isAll === "true") {
    //   this.columns.push({
    //     title: "服务费",
    //     dataIndex: "serviceCharge",
    //     key: "serviceCharge",
    //     width: 120
    //   });
    // }
  },

  beforeDestory() {},
  methods: {
    getSelectHeaders() {
      getSelectHeadersNewReq({
        sourceId: this.salaryHeaderId || this.salaryTemplateId,
        moduleCode: this.isAll === "true" ? "monthly" : "template",
        companyId: this.companyId
      }).then((res) => {
        const arr = JSON.parse(JSON.stringify(res.data.canSee));
        this.selectString = res.data;
        this.tempSelectedHead = arr.map((item) => ({
          title: item.fieldName,
          dataIndex: item.fieldName === "身份证号" ? "idCard" : item.fieldName === "姓名" ? "empName" : item.fieldName,
          width: item.fieldName === "身份证号" ? 200 : 130,
          fixed: item.fieldName === "姓名" || item === "身份证号" ? "left" : null,
          fieldName: item.fieldName,
          fieldEnName: item.fieldEnName,
          fieldGroup: item.fieldGroup,
          isEdit: item.isEdit
        }));
        this.columns = JSON.parse(JSON.stringify(this.tempSelectedHead));

        const arr2 = JSON.parse(JSON.stringify(res.data.ignore));
        this.tempNoSelectedHead = arr2.map((item) => ({
          title: item.fieldName,
          dataIndex: item.fieldEnName || item.fieldName,
          fieldName: item.fieldName,
          fieldEnName: item.fieldEnName,
          fieldGroup: item.fieldGroup,
          isEdit: item.isEdit
        }));
      });
    },
    getHeaders() {
      getHeaders({
        subjectId: this.salaryHeaderId || this.salaryTemplateId,
        subjectType: this.isAll === "true" ? "monthly" : "template"
      }).then((res) => {
        var arr2 = [];
        this.tempNoSelectedHead = [];
        this.selectString = JSON.parse(JSON.stringify(this.selectString.split(",")));
        // arr2 = arr.filter(v => !this.selectString.includes(v));
        arr2.forEach((item, index) => {
          var itemIndex = "";
          switch (item) {
            case "姓名":
              itemIndex = "empName";
              break;
            case "身份证号":
              itemIndex = "idCard";
              break;
            case "应发工资":
              itemIndex = "shouldWages";
              break;
            case "个人社保":
              itemIndex = "empSocialSecurity";
              break;
            case "企业社保":
              itemIndex = "enterpriseSocialSecurity";
              break;
            case "个人公积金":
              itemIndex = "empProvidentFund";
              break;
            case "企业公积金":
              itemIndex = "enterpriseProvidentFund";
              break;
            case "个人所得税":
              itemIndex = "tax";
              break;
            case "实发工资":
              itemIndex = "paidWages";
              break;
            default:
              itemIndex = item;
              break;
          }
          this.tempNoSelectedHead.push({ title: item, dataIndex: itemIndex, key: itemIndex });
        });
      });
    },
    handleHeadSearch() {
      this.selectString.canSee = this.tempSelectedHead;
      this.selectString.ignore = this.tempNoSelectedHead;
      updateHead(this.selectString).then((res) => {
        this.getSelectHeaders();
        this.headVisible = false;
      });
    },
    handleHeadChange(visible) {
      if (visible === false) {
        this.tempSelectedHead = JSON.parse(JSON.stringify(this.selectedHead));
        this.tempNoSelectedHead = JSON.parse(JSON.stringify(this.noSelectedHead));
      }
    },
    addSelectedHead(index) {
      const temp = JSON.parse(JSON.stringify(this.tempNoSelectedHead[index]));
      this.tempNoSelectedHead.splice(index, 1);
      this.tempSelectedHead.push(temp);
    },
    deleteSelectedHead(e, index) {
      e.preventDefault();
      const temp = JSON.parse(JSON.stringify(this.tempSelectedHead[index]));
      this.tempSelectedHead.splice(index, 1);
      this.tempNoSelectedHead.push(temp);
    },
    handleHeadCancel() {
      this.headVisible = false;
      this.tempSelectedHead = JSON.parse(JSON.stringify(this.selectedHead));
      this.tempNoSelectedHead = JSON.parse(JSON.stringify(this.noSelectedHead));
    },
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
    },

    onMove(e) {
      if (e.relatedContext.element.title === "姓名" || e.relatedContext.element.title === "身份证号") return false;
      return true;
    },
    taxCalculation() {
      taxCalculationNewReq(parseInt(this.monthly), parseInt(this.yearly), this.companyId, this.salaryTemplateId).then((res) => {
        this.$notification["success"]({
          message: "success",
          description: "计算成功"
        });
        this.gitTemplateDetailList();
      });
    },
    // 同步社保
    showSynchronous() {
      this.synchronousMonth = undefined;
      this.synchronousVisible = true;
    },
    synchronousOk() {
      if (!this.synchronousMonth) {
        this.$notification["error"]({
          message: "错误",
          description: "请选择月份"
        });
        return;
      }
      syncSocAndPfNewReq({
        socYear: parseInt(moment(this.synchronousMonth).format("YYYY")),
        socMonth: parseInt(moment(this.synchronousMonth).format("MM")),
        companyId: this.companyId,
        salaryTemplateSalaryId: this.salaryTemplateId
      }).then((res) => {
        this.$notification["success"]({
          message: "success",
          description: "同步成功"
        });
        this.gitTemplateDetailList();
        this.synchronousVisible = false;
      });
    },
    getChannelsList() {
      getChannels({
        pageNo: 1,
        pageSize: 1000
      }).then((res) => {
        this.channelNames = res.data.entities;
      });
    },
    getListByCompanyId() {
      listByCompanyIdGet({ companyId: this.$store.state.hr.companyId })
        .then(({ data }) => {
          this.labelList = data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    reload() {
      this.getEmpSelectPage();
      this.$notification["success"]({
        message: "成功",
        description: "刷新成功"
      });
    },
    handleMenuClick(e) {
      switch (e.key) {
        case "1":
          this.showStatistical();
          break;
        case "2":
          this.generateWage();
          break;
        case "3":
          this.deleteEmployes();
          break;
        case "4":
          this.goEdit();
          break;
        case "5":
          this.chooseMemberVisible = true;
          break;
        case "6":
          this.templateArchive();
          break;
        case "7":
          this.autoAdd();
          break;
        case "8":
          this.download();
          break;
        case "9":
          this.recalculate();
          break;
        case "10":
          this.goImportKQ();
          break;
      }
    },
    handleChange2(e) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.empStatus = e;
      this.getEmpSelectPage();
    },
    // 重新计算工资
    recalculate() {
      const templateList = [];
      templateList.push(this.salaryTemplateId);
      empSelectPageNewReq({
        pageNo: 1,
        pageSize: this.pagination.total,
        salaryTemplateSalaryIds: templateList.join(",")
      }).then((res) => {
        this.empAllList = res.data.entities;
        account({
          companyId: this.companyId,
          salaryTemplateSalaryId: parseInt(this.salaryTemplateId),
          empSalaryList: this.empAllList,
          isInitiative: 1
        }).then((res) => {
          this.buttonState = true;
          this.$notification["success"]({
            message: "成功",
            description: "计算成功"
          });
          // this.getEmpSelectPage();
          this.gitTemplateDetailList();
        });
      });
    },
    // 查询全部员工详情
    getEmpListAll() {
      getEmpListAll({ companyId: this.companyId }).then((res) => {
        this.empAllList = res.data;
      });
    },
    getDownload() {
      axios({
        url: this.url,
        params: this.params,
        paramsSerializer: (param) => {
          return qs.stringify(param, { indices: false });
        },
        method: "get",
        responseType: "blob",
        headers: {
          token: this.token
        }
      })
        .then((res) => {
          if (res.data && res.data.type === "application/json") {
            const reader = new FileReader();
            reader.readAsText(res.data, "utf-8");
            reader.onload = () => {
              const resJson = JSON.parse(reader.result);
              this.$message.error(resJson.msg);
            };
          } else {
            const blob = new Blob([res.data], {
              type: "application/octet-stream"
            });
            const link = document.createElement("a");
            try {
              if (this.bankType === "HUAXIA_BANK") {
                link.download = this.excelName + ".txt";
              } else {
                link.download = this.excelName + ".xlsx";
              }
            } catch (err) {
              console.log("debug log --> ", res);
            }
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    bankChange(e) {
      this.bankType = e;
    },
    statisticalOk() {
      this.params = {
        bankType: this.bankType,
        salaryTemplateSalaryIds: this.salaryTemplateId
      };
      this.url = `/salary/api/v1/employeeSalaries/exportBankDeduction`;
      this.excelName = "银行报盘详情";
      this.getDownload();
    },
    generateWage() {
      generateWageList({
        companyId: this.companyId,
        monthly: this.monthly,
        salaryTemplateSalaryId: parseInt(this.salaryTemplateId),
        yearly: this.yearly,
        tableName: this.tableName
      }).then((res) => {
        this.tableId = res.data;
        this.excelChange();
        this.generatelVisible = false;
      });
    },
    excelChange(e) {
      if (e && e.visibleWrong) {
        this.excelVisible = e.visibleWrong;
      } else {
        this.excelVisible = false;
        this.$router.push({
          path: "../add-payslip-sort",
          query: {
            tableId: this.tableId,
            month: this.monthly,
            year: this.yearly,
            sendName: this.tableName
          }
        });
      }
    },
    showStatistical() {
      this.statisticalVisible = true;
      this.bankType = undefined;
    },
    showGenerate() {
      this.generatelVisible = true;
      this.tableName = undefined;
    },
    autoAdd() {
      generatedBills({
        autoSystem: true,
        subjectType: "薪资账单",
        month: this.monthly,
        year: this.yearly,
        companyIdList: [this.companyId]
        // companyId: this.companyId,
        // companyName: this.companyName
      }).then((res) => {
        this.addVisible = false;
        this.$notification["success"]({
          message: "success",
          description: "生成成功"
        });
      });
    },
    // 录入截止上月个税累计
    goTax() {
      this.$router.push({
        path: "/wages/monthly/incomeTax",
        query: {
          monthly: this.monthly,
          yearly: this.yearly,
          salaryTemplateId: this.salaryTemplateId
        }
      });
    },
    // 倒入工资
    goImport() {
      this.$router.push({
        path: "/wages/yuegongzibiao/importWages",
        query: {
          monthly: this.monthly,
          yearly: this.yearly,
          salaryTemplateId: this.salaryTemplateId
        }
      });
    },
    // 同步计薪人员
    synchronous() {
      getnotDetailsList({
        salaryTemplateIds: this.templateId,
        monthly: this.monthly,
        yearly: this.yearly,
        companyId: this.companyId
      }).then((res) => {});
      synchronous({
        salaryTemplateSalaryId: this.salaryTemplateId,
        month: this.monthly,
        year: this.yearly,
        companyId: this.companyId
      }).then((res) => {
        this.getEmpSelectPage();
      });
    },

    // 返回
    goBack() {
      this.$router.push({
        path: "/wages/yuegongzibiao",
        query: {
          isBack: true,
          monthly: this.monthly,
          yearly: this.yearly
        }
      });
    },

    // 导出
    download(i) {
      this.salaryTemplateSalaryIdList = this.salaryTemplateId.split(",");
      const token = this.$store.state.auth.token;

      this.exportData = {
        channelId: this.channelId ? this.channelId : undefined,
        tag: this.tags.join(",") ? this.tags.join(",") : undefined,
        postType: this.postType ? this.postType : undefined,
        empName: this.inputName ? this.inputName : undefined,
        companyId: this.companyId,
        monthly: this.monthly,
        yearly: this.yearly,
        sourceId: this.salaryHeaderId || this.salaryTemplateId,
        moduleCode: this.isAll === "true" ? "monthly" : "template",
        // salaryTemplateSalaryIdList: this.salaryTemplateSalaryIdList
        salaryTemplateSalaryIds: this.salaryTemplateSalaryIdList.join(",")
      };
      this.url = `/salary/api/v1/employeeSalaryNews/export`;
      this.excelName = `${this.$store.state.hr.companyName}_` + "员工工资导出详情" + ".xlsx";
      this.postDownload();
    },
    // 归档
    handleAbolition() {
      const _this = this;
      archiveNewReq({ salaryTemplateSalaryId: _this.salaryTemplateId }).then((res) => {
        _this.buttonArchive.isArchive = true;
        _this.$router.go(-1);
        _this.$notification["success"]({
          message: "success",
          description: "已归档"
        });
      });
    },
    templateArchive() {
      this.abolitionVisible = true;
    },
    selectChange() {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.getEmpSelectPage();
    },
    inputChange(e) {
      this.inputName = e;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.getEmpSelectPage();
    },
    memberSelectedChange(e) {
      this.empList = [];
      this.empIdsList = [];
      e.forEach((item) => {
        this.empList.push({ empId: item.id, itemDetail: "" });
        this.empIdsList.push(item.id);
      });
      getEmpCreatedNewReq({
        empIds: this.empIdsList,
        monthly: this.monthly,
        yearly: this.yearly
      }).then((res) => {
        this.createdList = res.data;
        if (this.createdList.length) {
          this.empVisible = true;
        } else {
          this.handleEmpOk();
        }
      });
    },
    handleEmpOk() {
      addEmpDetailNewReq({
        companyId: this.companyId,
        salaryTemplateSalaryId: parseInt(this.salaryTemplateId),
        empSalaryList: this.empList,
        monthly: this.monthly,
        yearly: this.yearly,
        isInitiative: 1
      }).then((res) => {
        this.pagination.current = 1;
        this.pagination.pageSize = 10;
        this.getEmpSelectPage();
        this.gitTemplateDetailList();

        this.empVisible = false;
        this.$notification["success"]({
          message: "success",
          description: "添加成功"
        });
        this.getSelectSalaryGroup();
      });
    },
    onSelectChange2(e, a) {
      this.selectRowKey = [];
      this.empIdList = [];
      this.selectRowKey = e;
      a.forEach((item) => {
        this.empIdList.push(item.employeeSalaryId);
      });
    },
    replace() {
      deleteEmployeNewReq(this.empIdList).then((res) => {
        this.handleEmpOk();
      });
    },
    addEmp() {},
    deleteEmployes() {
      if (this.selectedRowId.length === 0) {
        this.$notification["error"]({
          message: "error",
          description: "删除失败，请选择需要删除的员工"
        });
      } else {
        var that = this;
        this.$confirm({
          title: "确认删除已选计薪人员吗?",
          onOk() {
            deleteEmployeNewReq(that.selectedRowId).then((res) => {
              that.$notification["success"]({
                message: "success",
                description: "删除成功"
              });

              that.selectedRowId = [];
              that.selectedRowKeys = [];
              that.buttonState = true;
              that.gitTemplateDetailList();
              that.getSelectSalaryGroup();
              setTimeout(() => {
                that.pagination.current = 1;
                that.pagination.pageSize = 10;
                that.getEmpSelectPage();
              }, 100);
            });
          },
          onCancel() {
            console.log("Cancel");
          }
        });
      }
    },
    // 表格选择
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowId = [];
      this.selectedRowKeys = selectedRowKeys;
      if (this.selectedRowKeys.length && this.isAll === false) {
        this.buttonState = false;
      } else {
        this.buttonState = true;
      }
      selectedRow.forEach((item, index) => {
        this.selectedRowId.push(item.id);
      });
      this.selectedRow = JSON.parse(JSON.stringify(selectedRow));
    },
    // 分页
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getEmpSelectPage();
    },
    // 查询表头
    gitTemplateHeaderList() {
      this.columns = JSON.parse(JSON.stringify(this.initColumns));
      gitTemplateHeader({
        salaryTemplateSalaryIds: this.salaryTemplateId
      }).then((res) => {
        res.data.forEach((item, index) => {
          if (this.isAll === "true") {
            this.columns.splice(this.columns.length - 8, 0, {
              title: item.name,
              dataIndex: item.headerId,
              key: item.headerId,
              width: 130
            });
          } else {
            this.columns.splice(this.columns.length - 7, 0, {
              title: item.name,
              dataIndex: item.headerId,
              key: item.headerId,
              width: 130
            });
          }
        });
      });
    },
    // 根据工资模板汇总id查询详情
    gitTemplateDetailList() {
      const templateList = [];
      templateList.push(this.salaryTemplateId);
      gitTemplateDetailNewReq({
        salaryTemplateSalaryIds: templateList.join(","),
        salaryGroupId: this.salaryGroupSalaryId
      }).then((res) => {
        this.detailList = res.data;
        // this.monthly = res.data.monthly;
        // this.yearly = res.data.yearly;
        if (this.isAll === false) {
          // this.synchronous();
          this.getEmpSelectPage();
        } else {
          this.getEmpSelectPage();
        }
      });
    },
    // 根据工资模板汇总id查询薪资组
    getSelectSalaryGroup() {
      const templateList = [];
      templateList.push(this.salaryTemplateId);
      selectSalaryGroup({
        salaryTemplateSalaryIds: templateList.join(",")
      }).then((res) => {
        this.groupList = res.data;
        res.data.forEach((item) => {
          this.allGroupId.push(item.id);
        });
        // this.getEmpSelectPage();
      });
    },
    // 根据薪资组汇总表分页查询员工月工资
    getEmpSelectPage() {
      const templateList = [];
      templateList.push(this.salaryTemplateId);
      const groupId = [];
      if (this.salaryGroupSalaryId) {
        groupId.push(this.salaryGroupSalaryId);
      }
      this.loading = true;
      empSelectPageNewReq({
        channelId: this.channelId,
        tag: this.tags.join(",") ? this.tags.join(",") : undefined,
        postType: this.postType,
        companyId: this.companyId,
        empStatus: this.empStatus,
        salaryGroupSalaryId: this.salaryGroupSalaryId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        empName: this.inputName,
        salaryTemplateSalaryIds: templateList.join(",")
      }).then((res) => {
        this.loading = false;
        if (res.data && res.data.entities) {
          this.pagination.total = res.data.entityCount; // 共多少条
          this.pagination.pageSize = res.data.pageSize; // 每页多少条
          this.pagination.current = res.data.pageNo; // 当前第几页
          this.dataList = res.data.entities.map((item) => {
            const itemNew = { ...item };
            if (itemNew.employeeAmountVOList && item.employeeAmountVOList.length > 0) {
              for (let i = 0; i < item.employeeAmountVOList.length; i++) {
                const li = item.employeeAmountVOList[i];
                itemNew[li.itemName] = li.amount;
              }
            }
            return itemNew;
          });
        }
      });
    },
    // 选择薪资组变化
    handleChange(e) {
      this.salaryGroupSalaryId = e;
      this.getEmpSelectPage();
      // this.gitTemplateDetailList();
    },
    goCalculation() {
      this.$router.push({
        path: "/wages/monthly/calculation",
        query: {
          personalPeriod: this.personalPeriod,
          salaryTemplateId: this.salaryTemplateId,
          templateId: this.templateId,
          monthly: this.monthly,
          yearly: this.yearly
        }
      });
    },
    goEdit() {
      sessionStorage.setItem("selectedRow", JSON.stringify(this.selectedRow));
      sessionStorage.setItem("salaryColumns", JSON.stringify(this.columns));
      this.$router.push({
        path: "/wages/yuegongzibiao/editDetails",
        query: {
          id: this.selectedRowId.join(","),
          date: this.monthly >= 10 ? `${this.yearly}` + "-" + `${this.monthly}` : `${this.yearly}` + "-0" + `${this.monthly}`
        }
      });
    },
    goImportKQ() {
      this.visibleKQ = true;
    },
    upDate() {
      this.pagination.current = 1;
      this.gitTemplateDetailList();
      // this.getEmpSelectPage();
    }
  }
};
</script>
<style lang="scss" scoped>
.overview-no-select-tag {
  background-color: #fff;
  cursor: pointer;
  margin: 5px;
}
.overview-tag-wrapper {
  ::v-deep .ant-tag {
    .anticon-close {
      color: var(--primary);
    }
  }
}
.overview-select-tag-name {
  cursor: pointer;
  margin: 5px;
  color: #666666;
}
.overview-select-tag {
  background-color: #fff !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary);
  cursor: pointer;
  margin: 5px;
}
$body-width: calc(100% - 338px);
.head {
  padding: 0 20px 15px 20px;
  width: 100%;
  display: flex;
  text-align: center;
  line-height: 60px;
  justify-content: space-between;
  font-size: 20px;
  color: #000000;
  font-weight: 500;
  text-align: center;
  .anticon-left {
    color: #595959;
    font-size: 20px;
  }
}
.fix-item-wrapper {
  margin-left: 20px;
  margin-right: 20px;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  .fix-item-one {
    flex-shrink: 0;
    height: 100px;
    display: flex;
    align-items: center;
    width: 150px;
    padding-left: 24px;
    .fix-item-oneBox {
      height: 40px;
      display: flex;
      align-items: center;
      width: 100%;
    }
  }
  .fix-item-one:hover {
    background: #f4f6fa;
  }
  .fix-item-two {
    .item-two-Box {
      min-width: 120px;
      height: 100px;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      .item-two-border {
        height: 40px;
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        border-left: 1px solid #e8e8e8;
        padding-left: 16px;
        padding-right: 16px;
      }
    }
    .item-two-Box:hover {
      background: #f4f6fa;
    }
  }
  .fix-item-name {
    font-size: 18px;
    font-weight: 500;
    color: #222426;
    line-height: 28px;
  }
}
.childpProjectName {
  font-size: 14px;
  font-weight: 300;
  color: #9c9c9c;
}
.childContentName {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}
.tableBox {
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 30px;
}
.operation {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
}
</style>
